<template>
  <div class="box_wrapper">
    <el-form ref="ruleFormRef" :model="formData" class="form_box">
      <el-form-item label="默认充值模板" prop="name">
        <el-select
          v-model="formData.id"
          placeholder="请选择"
          @change="changeTemplate"
        >
          <el-option
            v-for="(item, index) in optionsSelect"
            :key="index"
            :label="item.text"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <p class="grey" style="margin-bottom: 12px">
      <el-alert
        title="在这里可以配置默认的充值模板，也可以在推广管理中对每部剧集单独配置"
        type="warning"
        :closable="false"
      />
    </p>

    <!-- 模板 -->
    <defaultTemplate ref="baseTemplateRef" :isUnlock="false" />

    <div style="margin-top: 30px" v-auth="'api:agent:template:bind'">
      <!-- <el-button size="large" @click="resetForm">重置</el-button> -->
      <el-button size="large" type="primary" @click="saveTMP('保存')">
        保存为默认设置
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import defaultTemplate from "@/components/DefaultRechargeTemlate/defaultTemlate.vue";
import {
  listForSelector,
  getById,
  getPayTemp,
  setPayTemp,
} from "@/api/globalManage/defaultTemplate/index";
import { useUserStore } from "@/store/modules/user";
import { cloneDeep } from "lodash-es";

const userStore = useUserStore();

const ruleFormRef = ref();
const baseTemplateRef = ref();
const formData = reactive({
  id: "", // 模板ID
});

const tempId = ref(); // 保存首次进来默认模板ID

interface selectType {
  value: number;
  text: string;
}
const optionsSelect = ref<Array<selectType>>([]);

// 保存模板
const saveTMP = (str: string) => {
  let params = {
    name:
      optionsSelect.value.find(
        (x: Record<string, any>) => x.value === formData.id
      )?.text || "默认模板",
    items: baseTemplateRef.value.relationDtoList,
  };
  setPayTemp(+userStore.user.userAppid, params).then(() => {
    ElMessage.success(`${str}成功`);
  });
};

// 切换模板  -- 根据模板id 获取
const changeTemplate = (val: number) => {
  const id: number = val;
  getById(id).then((res: Record<string, any>) => {
    nextTick(() => {
      baseTemplateRef.value.relationDtoList = cloneDeep(res?.items);
    });
  });
};

// 获取下拉充值模板list
const getTemplateList = () => {
  listForSelector({}).then((res: Record<string, any>) => {
    optionsSelect.value = JSON.parse(JSON.stringify(res)) || [];
  });
};

// 重置表单
// const resetForm = () => { };

// 获取小程序绑定模板
const getPayTempList = () => {
  getPayTemp(+userStore.user.userAppid).then((res: Record<string, any>) => {
    baseTemplateRef.value.relationDtoList = cloneDeep(res?.items);
  });
};

onMounted(() => {
  getTemplateList();
  getPayTempList();
});
</script>

<style lang="scss" scoped>
.box_wrapper {
  min-height: calc(100vh - 70px);
  padding: 18px;
  background-color: #fff;

  .form_box {
    :deep(.el-form-item__label) {
      font-size: 16px;
      color: rgb(136 136 136);
    }
  }
}
</style>
